<template>
  <div class="gouwuche">
    <div v-if="list.length > 0">
      <br />
      <span>
        <span @click="btn1()" class="spa1">返回</span>
        <span class="spa">购物车</span>
        <span
          >分享<van-cell title="" @click="showShare = true"/>
          <van-share-sheet
            v-model="showShare"
            title="立即分享给好友"
            :options="options"
            @select="onSelect"
        /></span>
      </span>
      <hr />
      <!-- 购物车 -->
      <div class="goods-list" v-for="(data, i) in list" :key="data._id + i">
        <van-checkbox v-model="data.checked" />
        <img :src="data.product.coverImg" alt="" />
        <div class="shu">
          <p class="name">{{ data.product.name }}</p>
          <p class="red">$:{{ data.product.price }}</p>
          <button class="jia" @click="jia(data.product._id, 1)">+</button>
          <span class="tex">{{ data.quantity }}</span>
          <button
            class="jia"
            @click="data.quantity > 1 && jia(data.product._id, -1)"
          >
            -
          </button>
          <button @click="del(data._id)" class="del" v-show="data.checked">
            删除
          </button>
        </div>
      </div>
      <van-submit-bar
        :price="sumPrice * 100"
        button-text="提交订单"
        @submit="onSubmit"
        @click="tijiao()"
      >
        <van-checkbox v-model="checked">全选</van-checkbox>
        <button v-show="checked" class="quan" @click="dels">全部删除</button>
      </van-submit-bar>
    </div>
    <div v-else>
      <img class="img-3" src="../img/购物车.jpg" />
      <center>
        <h3 @click="btn2">返回继续购物</h3>
      </center>
    </div>
  </div>
</template>

<script>
import {
  reqCartlistAPI,
  addToCart,
  reqDelcartAPI,
  reqDelCartsAPI,
} from "../api/cart";
export default {
  components: {},
  data() {
    return {
      list: [],
      // 分享
      showShare: false,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
    };
  },
  computed: {
    checked: {
      set(flag) {
        this.list.map((item) => this.$set(item, "checked", flag));
      },
      get() {
        return (
          this.list.length ==
          this.list.filter((item) => item.checked == true).length
        );
      },
    },
    // 计算总价
    sumPrice() {
      return this.list
        .filter((item) => {
          return item.checked;
        })
        .reduce(function(pre, cur) {
          return pre + cur.product.price * cur.quantity;
        }, 0);
    },
    // 获取选中
    selectgoods() {
      var selectlist = [];
      this.list.forEach((item) => {
        if (item.checked) {
          selectlist.push({
            quantity: item.quantity, //数量
            product: item._id, //id
            price: item.product.price, //金额
          });
        }
      });
      return selectlist;
    },
  },
  watch: {},

  methods: {
    // 返回继续购物
    btn2() {
      this.$router.push("/home");
    },
    // 提交
    onSubmit() {
      this.$router.push("/address");
    },
    // 获取接口数据
    async getcartlist() {
      var result = await reqCartlistAPI();
      console.log(result);
      this.list = result;
    },
    // 加jian
    async jia(id, num) {
      await addToCart(id, num);
      this.list.forEach((data) => {
        data.product._id == id
          ? (data.quantity = data.quantity + num)
          : data.quantity;
      });
    },
    // 删除单个
    async del(id) {
      var dange = await reqDelcartAPI(id);
      console.log(dange);
      this.getcartlist();
    },
    // 全部删除
    async dels() {
      console.log("1");
      var ids = [];
      this.selectgoods.forEach((item) => {
        ids.push(item.product);
      });
      var quan = await reqDelCartsAPI(ids);
      console.log(quan);
      this.getcartlist();
    },
    // 返回
    btn1() {
      this.$router.go(-1);
    },
  },
  created() {
    this.getcartlist();
  },
  mounted() {},
};
</script>
<style scoped>
.img-3 {
  width: 100vw;
  height: 80vw;
}
.name {
  font-size: 14px;
}
img {
  width: 100px;
  height: 100px;
}
.spa {
  margin: 0px 27vw;
  font-size: 18px;
}
.spa1 {
  margin-left: 20px;
  font-size: 18px;
}
.goods-list {
  display: flex;
  width: 100vw;
  height: 110px;
  padding-top: 10px;
}
.shu {
  margin-left: 30px;
  margin-top: -15px;
}
.red {
  color: red;
}
.jia {
  width: 30px;
  border: none;
  background-color: #fafafa;
  font-size: 25px;
}
.jian {
  width: 30px;
  border: none;
  background-color: #fafafa;
  font-size: 25px;
}
.del {
  position: absolute;
  right: 30px;
  height: 30px;
  color: #fff;
  background-color: red;
  border: none;
}
.quan {
  background-color: #ff004c;
  border: none;
  border-radius: 20px;
}
h3 {
  color: red;
}
</style>
